<template>
  <section style="margin: 0 auto">
    <template>
      <el-form :inline="true" label-width="80px" style="width: 840px;margin-bottom: 10px">
        <el-form-item prop="date1">
          <el-date-picker type="date" placeholder="选择日期" v-model="date" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <span style="height: 40px;line-height: 40px">至</span>
        <el-form-item prop="date1">
          <el-date-picker type="date" placeholder="选择日期" v-model="date" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query()">查询</el-button>
        </el-form-item>
      </el-form>
    </template>
    <p>每日注册总数</p>
    <el-table border :data="users" element-loading-text="拼命加载中" style="width: 842px">
      <el-table-column prop="id" label="日期" width="280">
      </el-table-column>
      <el-table-column prop="id" label="Android" width="280">
      </el-table-column>
      <el-table-column prop="id" label="ios" width="280">
      </el-table-column>
    </el-table>
    <p>每日新增注册用户数</p>
    <el-table border :data="users" element-loading-text="拼命加载中" style="width: 842px">
      <el-table-column prop="id" label="日期" width="280">
      </el-table-column>
      <el-table-column prop="id" label="Android" width="280">
      </el-table-column>
      <el-table-column prop="id" label="ios" width="280">
      </el-table-column>
    </el-table>
    <p>每日首次登录用户数</p>
    <el-table border :data="users" element-loading-text="拼命加载中" style="width: 842px">
      <el-table-column prop="id" label="日期" width="280">
      </el-table-column>
      <el-table-column prop="id" label="Android" width="280">
      </el-table-column>
      <el-table-column prop="id" label="ios" width="280">
      </el-table-column>
    </el-table>
    <p>每日活跃用户数</p>
    <el-table border :data="users" element-loading-text="拼命加载中" style="width: 842px">
      <el-table-column prop="id" label="日期" width="280">
      </el-table-column>
      <el-table-column prop="id" label="Android" width="280">
      </el-table-column>
      <el-table-column prop="id" label="ios" width="280">
      </el-table-column>
    </el-table>
    <p>七日活跃用户数</p>
    <el-table border :data="users" element-loading-text="拼命加载中" style="width: 842px">
      <el-table-column prop="id" label="日期" width="280">
      </el-table-column>
      <el-table-column prop="id" label="Android" width="280">
      </el-table-column>
      <el-table-column prop="id" label="ios" width="280">
      </el-table-column>
    </el-table>
    <p>连续活跃用户数</p>
    <el-table border :data="users" element-loading-text="拼命加载中" style="width: 842px">
      <el-table-column prop="id" label="日期" width="280">
      </el-table-column>
      <el-table-column prop="id" label="Android" width="280">
      </el-table-column>
      <el-table-column prop="id" label="ios" width="280">
      </el-table-column>
    </el-table>
    <p>每日平均打开次数统计</p>
    <el-table border :data="users" element-loading-text="拼命加载中" style="width: 842px">
      <el-table-column prop="id" label="日期" width="280">
      </el-table-column>
      <el-table-column prop="id" label="Android" width="280">
      </el-table-column>
      <el-table-column prop="id" label="ios" width="280">
      </el-table-column>
    </el-table>
    <p>每日日均注册用户数</p>
    <el-table border :data="users" element-loading-text="拼命加载中" style="width: 842px">
      <el-table-column prop="id" label="日期" width="280">
      </el-table-column>
      <el-table-column prop="id" label="Android" width="280">
      </el-table-column>
      <el-table-column prop="id" label="ios" width="280">
      </el-table-column>
    </el-table>
  </section>
</template>
<script>
  import axios from "axios";
  export default {
    data() {
      return {
        users: [],
        date: ''
      }
    }, methods:{
      getTabData: function(index) {
        var _this = this;
        axios.get(
          '/api/getJson',{
            method:'GET',
           headers:{
             'Accept': 'application/json',
             'Content-Type': 'application/json',

           },
        })
          .then(function(response) {
           console.log(response);
            _this.users = response.data
          })
          .catch(function(error) {
            console.log(error);
          });

      },
    },
    mounted(){
      // this.getTabData()
    }

  }
</script>
<style>
  p{
    text-align: left;
  }
  section{
    padding-left:77px;
  }
  .el-form--inline .el-form-item__label{
    margin-top: -16px;
  }
</style>
